<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

<title>地址管理</title>

<link href="/assets/css/admin.css" rel="stylesheet" type="text/css">
<link href="assets/css/amazeui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="res/static/css/main.css">
<link href="css/personal.css" rel="stylesheet" type="text/css">
<link href="css/addstyle.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/amazeui.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.address {
	padding-top: 30px;
	padding-left: 0px;
	padding-bottom: 50px;
}

.info {
	width: 237px;
	height: 106px;
	display: inline-block;
	/* background-image: url(""); */
}
</style>
</head>
<script type="text/javascript">
	$(function() {
		$("div.info").click(function() {
			$(".info").css("background-image", "url('')");
			$(this).css("background-image", "url('images/mail_1.png')");
			console.log("鼠标点击,背景变红");
		});
	})
</script>
<script type="text/javascript">
	window.onload = function() {
		//声明查询获取所有Id为Info的元素
		var info = document.querySelectorAll("div[class='info']")
		//声明数组，原型，切片  
		var fArr = Array.prototype.slice.call(info);
		//创建“dom”函数  
		fArr.forEach(function(dom) {
			//添加mouseover鼠标事件  
			dom.addEventListener('mouseover', function() {
				//鼠标[经过]相关div图层时，其背景色变为“#F2F2F2”色  
				if (this.style.backgroundColor != "red") {
					this.style.backgroundColor = "#F2F2F2";

				}
				console.log("鼠标经过");
			});
			//添加mouseout鼠标事件  
			dom.addEventListener("mouseout", function() {
				//鼠标[离开]相关div图层时，其背景色变为白色  
				// this.style.backgroundColor = "#FFFFFF";   
				console.log("鼠标挪走");
				if (this.style.backgroundColor != "red") {
					console.log("鼠标挪走,背景灰色");
					this.style.backgroundColor = "#FFFFFF"
				}
			});
		});
	}
</script>
<body>
	

<jsp:include page="header.jsp"></jsp:include>


	<div class="center">
		<div class="col-main">
			<div class="main-wrap">

				<div class="user-address">
					<!--标题 -->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf">
							<strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small>
 							<button style="margin-left:700px; " type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增用户</button>		
						</div>
					</div>
					<hr />
					<!-- 新增用户模态框 -->
					<div class="modal fade" id="exampleModal" tabindex="-1"
						role="dialog" aria-labelledby="exampleModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
								</div>
								<div class="modal-body">
									<form id="insertAddress" action="getPersonInsertAddressInfo"
										method="get">
										<div class="form-group">
											<label for="addressName" class="control-label">用户名</label> <input
												type="text" class="form-control" id="addressName"
												name="addressName">
										</div>
										<div class="form-group">
											<label for="messageAddress" class="control-label">地址</label>
											<textarea class="form-control" id="messageAddress"
												name="messageAddress"></textarea>
										</div>
										<div class="form-group">
											<label for="messageTel" class="control-label">联系方式</label>
											<textarea class="form-control" id="messageTel"
												name="messageTel"></textarea>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-info" onclick="add_info()">立即添加</button>
									<button type="button" class="btn btn-default"
										data-dismiss="modal">我在想想</button>
								</div>
							</div>
						</div>
					</div>
<script>
    function add_info()
    {
        var form = document.getElementById('insertAddress');
        form.submit();      
    }
</script>
					<div class="address">
						<div class="info">
							<div>
								&nbsp;<br> &nbsp;&nbsp;<span class="Curr_Address">${consumer.caddress}</span>
								&nbsp;&nbsp;(<span class="Curr_name">${consumer.cname}</span>&nbsp;收)
								<hr>
								&nbsp;&nbsp;<span class="Curr_tel">${consumer.ctel }</span> <input
									type="hidden" value="${consumer.cid}"><input
										type="hidden" value="1"> <a
									style="padding-left: 102px;" >删除地址</a>
							</div>
						</div>
						<c:forEach items="${address}" var="address" varStatus="i">
							<div class="info">
								<div>
									&nbsp;<br> &nbsp;&nbsp;<span class="Curr_Address">${address.address}</span>
									&nbsp;&nbsp;(<span class="Curr_name">${ address.name}</span>&nbsp;收)
									<hr>
									&nbsp;&nbsp;<span class="Curr_tel">${address.tel }</span> <input
										type="hidden" value="${address.consumer.cid}"> <input
										type="hidden" value="${address.aid}"><a
										style="padding-left: 80px;" href="deleteAddressInfo?aid=${address.aid}">删除地址</a>
								</div>
							</div>
						</c:forEach>
					</div>
					<script type="text/javascript">
						$(function() {
							$(".info").click(
									function() {
										//var  address=$(this).children().text();
										//获取点击到的地址栏信息
										var address = $(this).children().find(
												"span").eq(0).text();
										console
												.log("00000000000000000"
														+ address
														+ "00000000000000000");
										var sendAddress = $("#sendAddress")
												.val();
										//对订单中的地址栏赋值
										sendAddress = address;
										$("#sendAddress").val(sendAddress)
										console.log("------9999----"
												+ sendAddress);
										//点击获取收件人的姓名
										var name = $(this).children().find(
												"span").eq(1).text();
										console.log("1111111111111111" + name);
										//对订单的收件人栏赋值
										var Ordername = $("#orderCusomer")
												.val();
										Ordername = name;
										$("#orderCusomer").val(Ordername);
										//点击获取收件人里联系方式
										var tel = $(this).children().find(
												"span").eq(2).text();
										//对联系方式栏赋值
										var orderTel = $("#orderTel").val();
										orderTel = tel;
										$("#orderTel").val(orderTel);
										//获取用户主键Id
										var cid = $(this).children().find(
												"input").eq(0).val();
										console.log("&&&&&&&&&&&&&&&&&" + cid);
										//封装用户主键
										var hiddenCid = $("#hiddenCid").val();
										hiddenCid = cid;
										$("#hiddenCid").val(hiddenCid);
										//获取地址主键Id
										var aid = $(this).children().find(
												"input").eq(1).val();
										console.log("&&&&&&&&&&&&&&&&&" + aid);
										//封装用户主键
										var hiddenAid = $("#hiddenCid").val();
										hiddenAid = aid;
										$("#hiddenAid").val(hiddenAid);
									})
						})
					</script>
					<div class="clear"></div>
					<a class="new-abtn-type"
						data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
					<!--例子-->
					<div class="am-modal am-modal-no-btn" id="doc-modal-1">

						<div class="add-dress">

							<!--标题 -->
							<div class="am-cf am-padding">
								<div class="am-fl am-cf">
									<strong class="am-text-danger am-text-lg">修改地址</strong> / <small>Add&nbsp;address</small>
								</div>
							</div>
							<hr />

							<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
								<form class="am-form am-form-horizontal" action="updateAddressInfo">

									<div class="form-group">
										<label for="exampleInputPassword1">收件地址:</label> <input
											type="text" class="form-control" id="sendAddress"
											name="sendAddress">
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">收件人:</label> <input
											type="text" class="form-control" id="orderCusomer"
											name="orderCusomer">
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">联系方式:</label> <input
											type="text" class="form-control" id="orderTel"
											name="orderTel">
									</div>
									<input type="hidden" id="hiddenCid" name="hiddenCid">
									<input type="hidden" id="hiddenAid" name="hiddenAid" >
									<button style="margin-left: 0; width: 300px;" type="submit"
										class="btn btn-danger">保存</button>

									<!-- <div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger">保存</a> <a
													href="javascript: void(0)"
													class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div> -->
								</form>
							</div>

						</div>

					</div>

				</div>

				<script type="text/javascript">
					$(document).ready(
							function() {
								$(".new-option-r").click(
										function() {
											$(this).parent('.user-addresslist')
													.addClass("defaultAddr")
													.siblings().removeClass(
															"defaultAddr");
										});

								var $ww = $(window).width();
								if ($ww > 640) {
									$("#doc-modal-1").removeClass(
											"am-modal am-modal-no-btn")
								}

							})
				</script>

				<div class="clear"></div>

			</div>
			<!--底部-->
			
		</div>

		<aside class="menu">
		<ul>
			<li class="person "><a href="index.html"><i
					class="am-icon-user"></i>个人中心</a></li>
			<li class="person">
				<p>
					<i class="am-icon-newspaper-o"></i>个人资料
				</p>
				<ul>
					<li><a href="gopersoninfo">个人信息</a></li>
					<li><a href="safety.html">安全设置</a></li>
					<li class="active"><a href="address.html">地址管理</a></li>
					<li><a href="cardlist.html">快捷支付</a></li>
				</ul>
			</li>
			<li class="person">
				<p>
					<i class="am-icon-balance-scale"></i>我的交易
				</p>
				<ul>
					<li><a href="order.html">订单管理</a></li>
					<li><a href="change.html">退款售后</a></li>
					<li><a href="comment.html">评价商品</a></li>
				</ul>
			</li>
			<li class="person">
				<p>
					<i class="am-icon-dollar"></i>我的资产
				</p>
				<ul>
					<li><a href="points.html">我的积分</a></li>
					<li><a href="coupon.html">优惠券 </a></li>
					<li><a href="bonus.html">红包</a></li>
					<li><a href="walletlist.html">账户余额</a></li>
					<li><a href="bill.html">账单明细</a></li>
				</ul>
			</li>

			<li class="person">
				<p>
					<i class="am-icon-tags"></i>我的收藏
				</p>
				<ul>
					<li><a href="collection.html">收藏</a></li>
					<li><a href="foot.html">足迹</a></li>
				</ul>
			</li>

			<li class="person">
				<p>
					<i class="am-icon-qq"></i>在线客服
				</p>
				
			</li>
		</ul>

		</aside>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>	
</body>
</html>